<template>
    <div class='desktopNum'>
        <div class='desktopNum_item' :style="{'width':widths}" v-for="(item,index) in data" :key="index">
            <div class='desktopNum_title'>
                {{item.name}}
            </div>
            <el-row class='row_item'>
                <el-col :span="8" class='col_item col_item1' >
                    <img :src="item.icon"/>
                </el-col>
                <el-col :span="16" class='col_item col_item2' >
                    <div :class="item.className" style='width:100%;height:100%;text-align:left'>
                        <div style='color:#313238;font-weight:bold;font-size:26px;z-index:100;margin-top:50px;cursor:pointer' @click="openWin(item)">{{item.num}}</div>
                        <div class='name' :style="{'color':item.color}"></div>
                       
                    </div>
                   
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div v-html="item.msg"></div> </el-col>
            </el-row>
        </div>
         <el-dialog :title="commonListData.name" class="listDialog"
          style="left:10%;top:10%;width:80% !important;height:70VH;overflow:hidden"
           append-to-body :visible.sync="showDialog">
            <list :commonListData="commonListData"  v-if="showDialog" @openWin="openWin2"></list>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">关闭</el-button>
            </div>
        </el-dialog>

         
    </div>
</template>
<script>

import List  from '../List.vue'
export default {
    name:"desktopNum",
    props:["appid","url"],
    components: {
        List,
    },
    data(){
        return{
            widths:'',
            data:[],
            showDialog:false,
            commonListData:{
                key:"",
                model:"",
                appid:"business",
                name:""
            }
        }
    },
    created(){
       this.loadData();
    },
    methods:{
        loadData(){
            this.$post(this.appid,this.url,{}).then(data=>{
                this.data=data;
                this.widths=100/this.data.length-1;
                this.widths=this.widths+"%"
            });
        },
        openWin(item){
            if(item.key){
                this.commonListData.key=item.key;
                this.commonListData.model=item.model;
                this.commonListData.name=item.name;
                this.showDialog=true;

            }
            
        },
        openWin2(item){
            this.$emit("openWin",item);
        }
    }
}
</script>
<style scoped>
.desktopNum{
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    border-radius: 5px;;
    justify-content: space-between;
}
.desktopNum_item{
    padding-left:10px;
    padding-right:10px;
    height:100%;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 3px rgba(195, 206, 220, 0.07);
    border-radius: 7px;
    padding:10px;
}
.row_item{
    flex:1;
    position: relative;
}
.col_item{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:100%;
    background:#fff;
}
.col_item div{
    text-align:center;
}
.col_item .name{
    font-weight: bold;
}
.col_item i{
    font-size:45px;
    color:#fff;
}
.col_item1{
    border-radius: 5px 0 0 5px;
}
.col_item2{
    border-radius: 8px;
}
.item_bg1{
    
    background: url('../../assets/img/desktop/bg.png');
    background-position: right bottom;
    background-size: 80px;
    background-repeat: no-repeat;
}

.item_bg2{
    
    background: url('../../assets/img/desktop/bg2.png');
    background-position: right bottom;
    background-size: 80px;
    background-repeat: no-repeat;
}

.item_bg3{
    
    background: url('../../assets/img/desktop/bg3.png');
    background-position: right bottom;
    background-size: 80px;
    background-repeat: no-repeat;
}

.item_bg4{
    
    background: url('../../assets/img/desktop/bg4.png');
    background-position: right bottom;
    background-size: 80px;
    background-repeat: no-repeat;
}
.col_item2 div{
    border-radius: 0 5px 5px 0;
}
.desktopNum_title{
    font-weight: 800;
    color: #434E7E;
}
.listDialog >>> .el-dialog{
    width:95%;
    height:68VH;
    display:flex;
}
</style>